<template>
  <div class="device-card">
    <div class="device-title device-summary-header">
      <img src="./img/p.png" alt="summary" class="device-summary-header-img" />
      <span>{{ $t('process.title') }}</span>
    </div>
    <div class="device-summary-table">
      <div class="device-summary-row device-summary-row-header">
        <div class="device-summary-cell">{{ $t('process.process') }}</div>
        <div class="device-summary-cell">{{ $t('process.output') }}</div>
        <div class="device-summary-cell">{{ $t('process.utilization') }}</div>
        <div class="device-summary-cell">{{ $t('process.passRate') }}</div>
        <div class="device-summary-cell">{{ $t('process.efficiencyGap') }}</div>
      </div>
      <template v-if="processSummaryList.length">
        <div v-for="item in processSummaryList" :key="item.name" class="device-summary-row">
          <div class="device-summary-cell">
            <img :src="item.icon" class="device-summary-icon" alt="icon" />
            <span>{{ findProcessName(item.name)}}</span>
          </div>
          <div class="device-summary-cell">
            <div class="af-mf-cell af-mf-cell-vertical af-mf-align">
              <div class="af af-row" v-if="item.name!='LVT'&&item.name!='LMHH'"><span>{{ item.af.output }}</span></div>
              <div class="mf mf-row"><span>{{ item.mf.output }}</span></div>
            </div>
          </div>
          <div class="device-summary-cell">
            <div class="af-mf-cell af-mf-cell-vertical af-mf-align">
              <div class="af af-row" v-if="item.name!='LVT'&&item.name!='LMHH'"><span>{{ item.af.utilization }}</span></div>
              <div class="mf mf-row"><span>{{ item.mf.utilization }}</span></div>
            </div>
          </div>
          <div class="device-summary-cell">
            <div class="af-mf-cell af-mf-cell-vertical af-mf-align">
              <div class="af af-row" v-if="item.name!='LVT'&&item.name!='LMHH'"><span>{{ formatPassRate(item.af.passRate) }}</span>
              </div>
              <div class="mf mf-row"><span>{{ formatPassRate(item.mf.passRate) }}</span>
              </div>
            </div>
          </div>
          <div class="device-summary-cell">
            <div class="af-mf-cell af-mf-cell-vertical af-mf-align">
              <div class="af af-row" v-if="item.name!='LVT'&&item.name!='LMHH'"><span>{{ item.af.efficiencyGap }}</span></div>
              <div class="mf mf-row"><span>{{ item.mf.efficiencyGap }}</span></div>
            </div>
          </div>
        </div>
      </template>
      <el-empty :description="$t('process.noData')" v-else />
    </div>
  </div>
  <!-- 缺料详情卡片 -->
  <div class="material-card">
    <div class="material-title">
      <img src="./img/expanded.png" alt="expanded" class="warning-title-img" />
      <span>{{ $t('process.materialDetail') }}</span>
    </div>
    <div>
      <!-- 按钮切换区域 -->
      <div class="material-tabs">
        <div class="material-tab-button" :class="{ active: activeTab === 'af' }" @click="switchTab('af')">
          <span class="tab-text">{{ $t('process.af') }}</span>
          <span v-if="materialListAF.length > 0" class="tab-badge">{{ materialListAF.length }}</span>
        </div>
        <div class="material-tab-button mf-tab" :class="{ active: activeTab === 'mf' }" @click="switchTab('mf')">
          <span class="tab-text">{{ $t('process.mf') }}</span>
          <span v-if="materialListMF.length > 0" class="tab-badge">{{ materialListMF.length }}</span>
        </div>
      </div>

      <!-- AF内容区域 -->
      <div v-show="activeTab === 'af'" class="material-list" id="material-list">
        <template v-if="materialListAF.length > 0">
          <div v-for="item in materialListAF" :key="item.id">
            <div class="material-row" @click="toggleMaterialExpand(item)">
              <!-- <span class="risk-tag" :class="item.riskColor">{{ $t('process.af') }}</span> -->
              <span class="mat-name">{{ item.name }}</span>
              <span v-if="item.num !== null" class="mat-num" :class="item.numColor">{{ item.num }} {{ item.unit }}</span>
              <el-icon class="expand-btn" :class="{ expanded: item.expanded }">
                <Plus />
              </el-icon>
            </div>
            <transition name="fade">
              <div v-show="item.expanded" class="material-detail">
                <div class="mat-detail-row">
                  <el-icon class="mat-detail-icon">
                    <Link />
                  </el-icon>
                  <span>{{ $t('process.spec') }}</span>
                  <span class="mat-detail-value blue">{{ item.detail.spec }}</span>
                </div>
                <div class="mat-detail-row">
                  <el-icon class="mat-detail-icon">
                    <Discount />
                  </el-icon>
                  <span>{{ $t('process.actualInventory') }}</span>
                  <span class="mat-detail-value blue">{{ item.detail.actualInventory }} {{ item.unit }}</span>
                </div>
                <div class="mat-detail-row">
                  <el-icon class="mat-detail-icon">
                    <Box />
                  </el-icon>
                  <span>{{ $t('process.dailyConsumption') }}</span>
                  <span class="mat-detail-value blue">{{ item.detail.dailyConsumption }} {{ item.unit }}</span>
                </div>
                <div class="mat-detail-row">
                  <el-icon class="mat-detail-icon">
                    <Bell />
                  </el-icon>
                  <span>{{ $t('process.availableDays') }}</span>
                  <span class="mat-detail-value blue">{{ item.detail.riskLevel || 0 }} {{ $t('process.day') }}</span>
                </div>
              </div>
            </transition>
          </div>
        </template>
        <el-empty :description="$t('process.noData')" v-else />
      </div>

      <!-- MF内容区域 -->
      <div v-show="activeTab === 'mf'" class="material-list">
        <template v-if="materialListMF.length > 0">
          <div v-for="item in materialListMF" :key="item.id">
            <div class="material-row" @click="toggleMaterialExpand2(item)">
              <!-- <span class="risk-tag" :class="item.riskColor">{{ $t('process.mf') }}</span> -->
              <span class="mat-name">{{ item.name }}</span>
              <span v-if="item.num !== null" class="mat-num" :class="item.numColor">{{ item.num }} {{ item.unit }}</span>
              <el-icon class="expand-btn" :class="{ expanded: item.expanded }">
                <Plus />
              </el-icon>
            </div>
            <transition name="fade">
              <div v-show="item.expanded" class="material-detail">
                <div class="mat-detail-row">
                  <el-icon class="mat-detail-icon">
                    <Link />
                  </el-icon>
                  <span>{{ $t('process.spec') }}</span>
                  <span class="mat-detail-value blue">{{ item.detail.spec }}</span>
                </div>
                <div class="mat-detail-row">
                  <el-icon class="mat-detail-icon">
                    <Discount />
                  </el-icon>
                  <span>{{ $t('process.actualInventory') }}</span>
                  <span class="mat-detail-value blue">{{ item.detail.actualInventory }} {{ item.unit }}</span>
                </div>
                <div class="mat-detail-row">
                  <el-icon class="mat-detail-icon">
                    <Box />
                  </el-icon>
                  <span>{{ $t('process.dailyConsumption') }}</span>
                  <span class="mat-detail-value blue">{{ item.detail.dailyConsumption }} {{ item.unit }}</span>
                </div>
                <div class="mat-detail-row">
                  <el-icon class="mat-detail-icon">
                    <Bell />
                  </el-icon>
                  <span>{{ $t('process.availableDays') }}</span>
                  <span class="mat-detail-value blue">{{ item.detail.riskLevel || 0 }} {{ $t('process.day') }}</span>
                </div>
              </div>
            </transition>
          </div>
        </template>
        <el-empty :description="$t('process.noData')" v-else />
      </div>
    </div>

  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { Box, Plus, CircleClose, EditPen, Tickets, Link, Discount, Bell } from '@element-plus/icons-vue';
import { getProcess, getMaterial } from '@/api/index';

// 合格率格式化
function formatPassRate(val) {
  if (val === null || val === undefined || val === '' || val === '-') return '-';
  if (typeof val === 'number' || (!isNaN(val) && val !== '')) return val + '%';
  if (typeof val === 'string' && val.includes('%')) return val;
  return val;
}

// 计算当前时间减去14小时
const getDate = () => {
  const now = new Date();
  now.setTime(now.getTime() - 14 * 60 * 60 * 1000);
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 获取URL参数中的date
function getUrlDate() {
  // 支持 ?date=xxxx-xx-xx 或 #/xxx?date=xxxx-xx-xx
  const search = window.location.search || '';
  const hash = window.location.hash || '';
  let match = search.match(/[?&]date=([0-9]{4}-[0-9]{2}-[0-9]{2})/);
  if (!match && hash) {
    match = hash.match(/[?&]date=([0-9]{4}-[0-9]{2}-[0-9]{2})/);
  }
  return match ? match[1] : '';
}

const urlDate = getUrlDate();

// 缺料详情模拟数据
const materialListAF = ref([]);
const materialListMF = ref([]);
const activeTab = ref('af'); // 默认显示AF标签页

// 切换标签页方法
function switchTab(tab) {
  activeTab.value = tab;
}
function toggleMaterialExpand(item) {
  if (item.expanded) {
    item.expanded = false;
  } else {
    materialListAF.value.forEach(d => { d.expanded = false; });
    item.expanded = true;
  }
}
function toggleMaterialExpand2(item) {
  if (item.expanded) {
    item.expanded = false;
  } else {
    materialListMF.value.forEach(d => { d.expanded = false; });
    item.expanded = true;
  }
}
// 工序图片映射
const processIconMap = {
  JC: new URL('./img/p1.png', import.meta.url).href,
  LVT: new URL('./img/p2.png', import.meta.url).href,
  LMHH: new URL('./img/p3.png', import.meta.url).href,
  TH: new URL('./img/p4.png', import.meta.url).href,
  JKJ: new URL('./img/p5.png', import.meta.url).href,
  PE: new URL('./img/p6.png', import.meta.url).href,
  DR: new URL('./img/p7.png', import.meta.url).href,
};
const keyProcessList = [
  { key: 'JC', 'zh-CN': '挤出 / Pcs', 'en-US': 'Extrusion / Pcs' },
  { key: 'LVT', 'zh-CN': 'LVT / Pcs', 'en-US': 'LVT / Pcs' },
  { key: 'LMHH', 'zh-CN': 'UV淋膜 / Pcs', 'en-US': 'Laminating / Pcs' },
  { key: 'TH', 'zh-CN': '贴合 / Pcs', 'en-US': 'Gluing / Pcs' },
  { key: 'JKJ', 'zh-CN': '锯开检 / Pcs', 'en-US': 'Saw cutting / Pcs' },
  { key: 'PE', 'zh-CN': 'PE / Pcs', 'en-US': 'PE / Pcs' },
  { key: 'DR', 'zh-CN': '打包 / 盒', 'en-US': 'Pack and wrap / Box' }
];

const findProcessName = (key) => {
  const lang = localStorage.getItem('lang') || 'zh-CN';
  const process = keyProcessList.filter(item => item.key === key);
  return process.length >= 1 ? process[0][lang] : key;
};
// 新增静态模拟数据
const processSummaryList = ref([
  // { name: 'JC', icon: new URL('./img/p1.png', import.meta.url).href, af: { output: '7200箱', utilization: 93.2, passRate: 98.2, efficiencyGap: 2.1 }, mf: { output: '6800箱', utilization: 91.5, passRate: 97.8, efficiencyGap: 2.5 } },
  // { name: 'LVT', icon: new URL('./img/p2.png', import.meta.url).href, af: { output: '8000箱', utilization: 95.0, passRate: 97.5, efficiencyGap: 1.8 }, mf: { output: '7500箱', utilization: 92.0, passRate: 97.0, efficiencyGap: 2.0 } },
  // { name: 'LMHH', icon: new URL('./img/p3.png', import.meta.url).href, af: { output: '5000箱', utilization: 90.1, passRate: 99.1, efficiencyGap: 2.5 }, mf: { output: '4800箱', utilization: 89.0, passRate: 98.9, efficiencyGap: 2.7 } },
  // { name: '贴合', icon: new URL('./img/p4.png', import.meta.url).href, af: { output: '4000箱', utilization: 88.6, passRate: 98.0, efficiencyGap: 3.0 }, mf: { output: '3900箱', utilization: 87.5, passRate: 97.8, efficiencyGap: 3.2 } },
  // { name: '据开检', icon: new URL('./img/p6.png', import.meta.url).href, af: { output: '3000箱', utilization: 87.5, passRate: 97.8, efficiencyGap: 2.9 }, mf: { output: '2950箱', utilization: 86.0, passRate: 97.5, efficiencyGap: 3.1 } },
  // { name: 'PE', icon: new URL('./img/p7.png', import.meta.url).href, af: { output: '3500箱', utilization: 89.3, passRate: 98.6, efficiencyGap: 2.2 }, mf: { output: '3400箱', utilization: 88.0, passRate: 98.2, efficiencyGap: 2.4 } },
  // { name: '打包', icon: new URL('./img/p8.png', import.meta.url).href, af: { output: '2000箱', utilization: 85.0, passRate: 97.0, efficiencyGap: 3.5 }, mf: { output: '1900箱', utilization: 84.0, passRate: 96.8, efficiencyGap: 3.7 } },
]);

onMounted(() => {
  let date = urlDate || getDate();
  // ...原有 getDateList 代码...
  getProcess({ date }).then(res => {
    if (res.code == 200) {
      const af = res.result.filter(item => item.tenantId === 8050);
      const mf = res.result.filter(item => item.tenantId === 8080);

      const processMap = new Map();
      // AF 先入表
      af.forEach((item) => {
        processMap.set(item.processCode, {
          name: item.processCode,
          icon: processIconMap[item.processCode] || '',
          af: {
            output: item.outputQty,
            utilization: item.equipmentUtilizationRate,
            passRate: item.passRate || '-',
            efficiencyGap: item.laborEfficiencyGapPercentage || '-'
          },
          mf: { output: '0', utilization: '-', passRate: '-', efficiencyGap: '-' }
        });
      });
      // MF 补充
      mf.forEach(item => {
        if (processMap.has(item.processCode)) {
          // 合并
          const obj = processMap.get(item.processCode);
          obj.mf = {
            output: item.outputQty | 0,
            utilization: item.equipmentUtilizationRate || '-',
            passRate: item.passRate || '-',
            efficiencyGap: item.laborEfficiencyGapPercentage || '-'
          };
        } else {
          // AF 没有，MF 独有
          processMap.set(item.processCode, {
            name: item.processCode,
            icon: processIconMap[item.processCode] || '',
            af: { output: 0, utilization: '-', passRate: '-', efficiencyGap: '-' },
            mf: {
              output: item.outputQty,
              utilization: item.equipmentUtilizationRate,
              passRate: item.passRate || '-',
              efficiencyGap: item.laborEfficiencyGapPercentage || '-'
            }
          });
        }
      });
      processSummaryList.value = Array.from(processMap.values());
    }
  });
  // 缺料详情 数据渲染
  getMaterial({ date }).then(res => {
    if (res.code === 200 && Array.isArray(res.result)) {
      // 获取当前语言
      const af = res.result.filter(item => item.tenantId === 8050);
      const mf = res.result.filter(item => item.tenantId === 8080);

      const lang = localStorage.getItem('lang') || 'zh-CN';

      materialListAF.value = af.map(item => {
        // 语言优先级：zh-CN -> materialNameZh，en -> materialNameEn，其他 -> materialName
        let name = item.materialCode;
        if (lang == 'zh-CN' && item.materialName_zh) {
          name += ' / ' + item.materialName_zh;
        } else if (lang.startsWith('en') && item.materialNameEn) {
          name += ' /' + item.materialNameEn;
        } else if (item.materialName) {
          name += ' /' + item.materialName;
        }
        // actualInventory实际库存数量    dailyConsumption 本月日消耗量
        const risk = (item.actualInventory/item.dailyConsumption)<=10 ? '高' : '低';
        const riskColor = 'blue';
        const num = item.actualInventory;
        const numColor =(item.actualInventory/item.dailyConsumption)<=10  ? 'red' : 'blue';
        return {
          id: item.id,
          risk,
          riskColor,
          name,
          num,
          numColor,
          expanded: false,
          unit: item.unit,
          detail: {
            spec: item.spec,
            actualInventory: item.actualInventory ? `${item.actualInventory}` : '-',// 实际库存数量
            dailyConsumption: item.dailyConsumption ? `${item.dailyConsumption}` : '-', // 本月日消耗量
            riskLevel: (Number(item.actualInventory || 0) / Number(item.dailyConsumption)).toFixed(2) || 0,
            riskLevelColor: 'blue',
          }
        }
      });
      materialListMF.value = mf.map(item => {
        // 语言优先级：zh-CN -> materialNameZh，en -> materialNameEn，其他 -> materialName
        let name = item.materialCode;
        if (lang == 'zh-CN' && item.materialName_zh) {
          name += ' / ' + item.materialName_zh;
        } else if (lang.startsWith('en') && item.materialNameEn) {
          name += ' / ' + item.materialNameEn;
        } else if (item.materialName) {
          name += ' / ' + item.materialName;
        }
        // actualInventory实际库存数量    dailyConsumption 本月日消耗量
        const risk = (item.actualInventory/item.dailyConsumption)<=10 ? '高' : '低';
        const riskColor = 'green';
        const num = item.actualInventory;
        const numColor =(item.actualInventory/item.dailyConsumption)<=10  ? 'red' : 'green';
        return {
          id: item.id,
          risk,
          riskColor,
          name,
          num,
          numColor,
          expanded: false,
          unit: item.unit,
          detail: {
            spec: item.spec,
            actualInventory: item.actualInventory ? `${item.actualInventory}` : '-',// 实际库存数量
            dailyConsumption: item.dailyConsumption ? `${item.dailyConsumption}` : '-', // 本月日消耗量
            riskLevel: (Number(item.actualInventory) / Number(item.dailyConsumption)).toFixed(2),
            riskLevelColor: risk === '高' ? 'red' : 'blue',
          }
        }
      });
    }
  });
  //
});
</script>

<style scoped lang="scss">
.af{
  color:#007AFF !important;
}
.mf{
  color:#4caf50 !important;
}

.device-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  padding: 10px;
  border: 1.5px solid #f2f3f5;
  width: 100%;
  max-width: 100%;
}

.device-title,
.material-title,
.device-detail-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
}

.device-title-icon,
.material-title-icon,
.device-detail-title-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  display: flex;
  align-items: center;
}

.device-list {
  width: 100%;
}

.device-row {
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 0 0 0;
}

.device-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.device-row-icon {
  font-size: 22px;
}

.device-row-icon.purple {
  color: #b07cff;
}

.device-row-icon.blue {
  color: #3b7cff;
}

.device-row-icon.green {
  color: #4caf50;
}

.device-row-name {
  flex: 1;
  font-size: 16px;
  color: #222;
}

.device-row-rate {
  font-size: 16px;
  color: #197aff;
  font-weight: bold;
  margin-right: 8px;
}

.device-row-rate-unit {
  font-size: 13px;
  color: #bbb;
  font-weight: normal;
}

.device-row-expand {
  font-size: 20px;
  color: #bbb;
  cursor: pointer;
  transition: color 0.2s;
}

.device-row-expand:hover {
  color: #197aff;
}

.device-detail {
  background: #f9fbe7;
  border-radius: 8px;
  margin: 10px 0 10px 0;
  padding: 12px 16px 12px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.device-detail-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #222;
  margin-bottom: 8px;
  gap: 8px;
}

.device-detail-title-icon {
  color: #b07cff;
  font-size: 20px;
}

.device-detail-rate {
  color: #197aff;
  font-size: 16px;
  margin-left: 8px;
}

.device-summary {
  background: #fff9b0;
  border-radius: 6px;
  padding: 4px 12px;
  color: #222;
  font-size: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.device-summary-icon {
  color: #e573c7;
  font-size: 18px;
}

.device-summary-label {
  color: #b07cff;
  font-size: 15px;
}

.device-summary-value {
  color: #222;
  font-size: 17px;
  font-weight: bold;
  margin-left: 8px;
}

.device-bar-group {
  margin-bottom: 10px;
}

.device-bar-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.device-bar-label {
  min-width: 60px;
  color: #888;
  font-size: 14px;
}

.device-bar-bg {
  flex: 1;
  height: 16px;
  background: #f0f0f0;
  border-radius: 8px;
  margin: 0 8px;
  overflow: hidden;
}

.device-bar-inner {
  height: 100%;
  border-radius: 8px;
}

.device-bar-inner.green {
  background: linear-gradient(90deg, #b7f774, #4caf50);
}

.device-bar-inner.red {
  background: linear-gradient(90deg, #ffb6b9, #fa915c);
}

.device-bar-value {
  min-width: 40px;
  color: #222;
  font-size: 15px;
  text-align: right;
}

.device-table {
  background: #f5f7fa;
  border-radius: 6px;
  margin-top: 10px;
  padding: 8px 0 8px 0;
}

.device-table-header {
  display: flex;
  align-items: center;
  background: #e3d7ff;
  border-radius: 6px 6px 0 0;
  font-size: 15px;
  color: #222;
  font-weight: bold;
  padding: 4px 12px;
  gap: 8px;
}

.device-table-col {
  flex: 1;
  text-align: center;
}

.device-table-row {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #222;
  padding: 4px 12px;
  gap: 8px;
}

.device-table-row-icon {
  color: #8fd3f4;
  font-size: 18px;
}

.device-table-row-name {
  flex: 1;
  font-size: 14px;
  color: #222;
}

.device-table-row-val {
  flex: 1;
  text-align: center;
  font-size: 14px;
}

.device-detail-empty {
  color: #bbb;
  text-align: center;
  padding: 16px 0;
  font-size: 15px;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}

.material-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  padding: 18px 18px 10px 18px;
  margin-bottom: 10px;
  border: 1.5px solid #f2f3f5;
  width: 100%;
  max-width: 100%;
  margin: 0 0 10px 0;
}

/* 按钮切换样式 */
.material-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: #f5f7fa;
  padding: 4px;
}

.material-tab-button {
  flex: 1;
  position: relative;
  padding: 12px 16px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  min-height: 44px;
}

.material-tab-button:hover {
  background: rgba(255, 255, 255, 0.8);
  color: #333;
}

.material-tab-button.active {
  background: #409EFF;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}

.material-tab-button.mf-tab.active {
  background: #4caf50;
  color: #fff;
}

.tab-text {
  position: relative;
  z-index: 1;
}

.tab-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ff4757;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: bold;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 2;
}

.material-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.material-title-icon {
  color: #3b7cff;
  font-size: 22px;
  margin-right: 8px;
}

.material-list {
  width: 100%;
}

.material-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding: 8px 0;
  font-size: 15px;
  position: relative;
}

.risk-tag {
  display: inline-block;
  min-width: 22px;
  padding: 4px 7px;
  border-radius: 3px;
  font-size: 13px;
  color: #fff;
  margin-right: 8px;
  text-align: center;
}

.risk-tag.green {
  background: #4caf50;
}

.risk-tag.blue {
  background: #409EFF;
}

.risk-tag.red {
  background: #e74c3c;
}

.mat-name {
  flex: 1;
  font-weight: 500;
  color: #222;
}

.mat-num {
  display: inline-block;
  background: #4caf50;
  color: #fff;
  border-radius: 15px;
  font-size: 12px;
  padding: 2px 5px;
  margin-right: 8px;
  text-align: center;
  font-weight: 200;
}

.mat-num.green {
  background: #4caf50;
}

.mat-num.blue {
  background: #409EFF;
}

.expand-btn {
  cursor: pointer;
  margin-left: 8px;
  font-size: 18px;
  color: #bbb;
  transition: color 0.2s, transform 0.3s;
}

.expand-btn.expanded {
  transform: rotate(180deg);
}

.expand-btn:hover {
  color: #409EFF;
}

.material-detail {
  background: #f5f7fa;
  border-radius: 8px;
  margin: 0 0 10px 0;
  padding: 10px;
  font-size: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.mat-detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.mat-detail-icon {
  color: #8fd3f4;
  font-size: 16px;
  margin-right: 6px;
}

.mat-detail-value {
  font-weight: bold;
  color: #222;
  margin-left: 8px;
}

.mat-detail-value.blue {
  color: #409EFF;
}

.mat-detail-value.red {
  color: #e74c3c;
  background-color: #F5F7FA !important;
}

.red {
  background-color: #e74c3c !important;
  color: #fff;
}

.mat-detail-value.green {
  color: #4caf50;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}

.warning-title-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-right: 8px;
  vertical-align: middle;
}

.device-summary-header {
  background: linear-gradient(90deg, #f8fafd 60%, #e3f0ff 100%);
  border-radius: 12px 12px 0 0;
  padding: 12px 10px 12px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.device-summary-header-img {
  width: 18px;
  height: 18px;
}

.device-summary-table {
  background: #fff;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 0 0 10px 0;
  overflow: hidden;
}

.device-summary-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
  color: #222;
  min-height: 40px;
  background: #fff;
}

.device-summary-row:last-child {
  border-bottom: none;
}

.device-summary-row-header {
  background: #f5f7fa;
  font-weight: bold;
  color: #333;
}

.device-summary-cell {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.device-summary-icon {
  width: 20px;
  height: 20px;
  margin-right: 0;
}

.af-mf-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.af-mf-cell-vertical {
  flex-direction: column;
  gap: 2px;
}

.af-mf-align {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.af-row,
.mf-row {
  display: flex;
  align-items: center;
  min-height: 24px;
  width: calc(100% - 10px);
  span{
    width: 100%;
    text-align: center;
  }
  /* 保证每行高度一致 */
}

.af-tag,
.mf-tag {
  display: inline-block;
  width: 32px;
  /* 图标宽度一致，和实际内容对齐 */
  text-align: center;
  margin-right: 2px;
}

.af-row span:last-child,
.mf-row span:last-child {
  min-width: 48px;
  /* 数值部分即使为空也占位 */
  display: inline-block;
}

.af-row .af-tag {
  background: #e3f0ff;
  color: #197aff;
}

.mf-row .mf-tag {
  background: #e6f7e6;
  color: #4caf50;
}

.af-tag,
.mf-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: bold;
  margin-right: 2px;
}

.af-tag {
  background: #e3f0ff;
  color: #197aff;
}

.mf-tag {
  background: #e6f7e6;
  color: #4caf50;
}

.device-summary-cell:nth-child(1) {
  margin-left: 10px;
  justify-content: flex-start;
  text-align: left;
}

@media (max-width: 768px) {
  .device-card {
    padding: 0px;
  }

  .material-card {
    padding: 10px;
  }

  .material-tabs {
    gap: 4px;
    padding: 3px;
  }

  .material-tab-button {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 40px;
  }

  .tab-badge {
    top: 6px;
    right: 6px;
    font-size: 10px;
    min-width: 14px;
    height: 14px;
  }

  .device-summary-table {
    overflow-x: auto;
    display: block;
    padding-bottom: 8px;
  }

  .device-summary-row,
  .device-summary-row-header {
    min-width: 550px;
    width: max-content;
    display: flex;
  }

  .device-summary-cell {
    min-width: 110px;
    box-sizing: border-box;
  }

  .device-summary-cell:nth-child(1) {
    width: 160px;
    max-width: 160px;
    padding: 15px 0 10px 10px;
    left: 0;
    position: sticky;
    z-index: 90;
    background: #fff;
    box-shadow: none !important;
    justify-content: flex-start;
    text-align: left;
  }

  .device-summary-row-header .device-summary-cell:nth-child(1) {
    background: #f5f7fa;
    z-index: 11;
    box-shadow: none !important;
  }

  .device-summary-cell:nth-child(2) {
    min-width: 110px;
    left: unset;
    position: static;
    z-index: auto;
    background: unset;
    box-shadow: none;
  }
}

.process-info-container,
.container-box {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

@media (max-width: 468px) {

  .process-info-container,
  .container-box {
    max-width: 100vw;
    margin: 0;
  }
}
</style>
